
<%@ page import="java.util.List" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <title>天气预报</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #000000;
  }
  body {
    width: 100%;
    height: 100vh;
    background-color: #cadae7;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .container {
    width: 500px;
    height: 500px;
    background-color: antiquewhite;

  }
  .head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    background-color: aqua;
    align-content: center;
    line-height: 50px;
    font-size: 1.2em;
    color: #000;
  }
  .head-r {
    width: 50%;
  }
  .head-r input {
    width: 60%;
    height: 30px;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 1.2em;
    padding: 0 10px;
    border: none;
    border-radius: 15px;


  }
  .head-r button {
    font-size: 1.2em;
  }
  /* 布局 */
  .main{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 450px;



  }
  .box1{
    flex:1;
    width: 100%;
    background-color: aquamarine;
    display: flex;
    justify-content:space-between;
  }
  .details{
    width: 100%;
    flex: 3;
    color: aqua;
  }
  .week{
    flex: 2;
    width: 100%;

    background-color: brown;
  }
  .week ul{
    position: relative;
    display: flex;
    flex-direction: row;
    list-style: none;


  }
  .week ul li{
    flex: 1;
    background-color: rgb(35, 114, 114);
    padding: 10px;
    border: 1px solid #000;
  }
</style>
<body>


<%--<%--%>
<%--  List<nowBean> info_list = (List<nowBean>) request.getAttribute("listone");--%>

<%--%>--%>




<div id="app">

<%--  <%--%>
<%--    List<nowBean> info_list = (List<nowBean>) request.getAttribute("list");--%>
<%--    for (nowBean info : info_list) {--%>
<%--  %>--%>


  <div  class="container" >

    <header class="head">
      <div>当前位置：</div>
      <form class="head-r"  >
        <input type="text" name="DressName" id="dressNameInput" value="北京" />
        <button  id="searchButton" >查询</button>
        <a href="/manage">管理</a>





      </form>
    </header>

    <div class="main">
      <div class="box1">
        <div>度数</div>
        <div > 时间{{currentTime}}
          <div>{{year}}</div>

        </div>
      </div>
      <div class="details">
        <p>最高温:lorem

        </p>
        <p>最低温</p>
        <p>风向</p>
        <p>穿衣指数</p>

      </div>
      <div class="week">
        <p>未来气温</p>
        <ul>
          <li>lorem</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>
    </div>

  </div>

</div>

</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
<script src="./js/jquery-2.2.4.min.js"></script>

<script>


  $(document).ready(function() {


    $('#searchButton').click(function() {

      var dressName = $('#dressNameInput').val();
      console.log(dressName)

      $.ajax({
        type: 'get',
        url: 'manage',
        data: {DressName: dressName},
        dataType: 'json',
        success: function(resp) {
          console.log(resp)
          // var table = $('#weatherTable');
          // for (var i = 0; i < data.length; i++) {
          //   var row = $('<tr>');
          //   row.append($('<td>').text(data[i].id));
          //   row.append($('<td>').text(data[i].name));
          //   row.append($('<td>').text(data[i].text));
          //   row.append($('<td>').text(data[i].temp));
          //   row.append($('<td>').text(data[i].feels_like));
          //   row.append($('<td>').text(data[i].fh));
          //   row.append($('<td>').text(data[i].wind_class));
          //   row.append($('<td>').text(data[i].wind_dir));
          //   row.append($('<td>').text(data[i].update_time));
          //   table.append(row);
          // }
        },
        error: function(xhr, status, error) {
          console.log('Error occurred while getting weather data: ' + error);
        }
      });

    })

  });
</script>

</html>